<template>
  <div style=" background: #ffffff">
    <span style=" font-size: 18px">购物车(</span>
    <span style=" font-size: 18px">{{this.cartnum}}</span>
    <span style="font-size: 18px">)</span>
    <span style="font-size: 16px;float:right;" @click="remove">删除已选</span>
    <!-- <van-card
      v-for="item in 2"
      :key="item"
      :num="value"
      :price="521.99*value"
      desc="苹果12粒/箱160g以上/个"
      title="【基地直发】清谷田园艾芙嘎啦"
      thumb="http://img.netbian.com/file/newc/dcc50cb2f380a8431c7bea23eb41185e.jpg"
    >
      <div slot="tags">
        <van-tag plain type="danger">删除</van-tag>
      </div>
      <div slot="footer">
        <van-stepper v-model="value" />
      </div>
    </van-card>-->
    <!-- 购物车内的物品 -->
    <div class="cartlist" v-for="(item,a) in cartlist" :key="item.gid">
      <div class="goodsshop">
        <input type="checkbox" v-model="item.isok" @click="stall(a)" />
        <p>
          <van-icon name="wap-home-o" />
          {{item.cname}}
        </p>
      </div>

      <ul class="goodsinfo">
        <li v-for="(ele,index) in item.cartlist" :key="ele.cid">
          <input type="checkbox" v-model="ele.isok2" />
          <img :src="ele.img" alt />
          <div>
            <p style="text-align: left">{{ele.dis}}</p>
            <p style="color:#969696;text-align: left">规格：175/XXL S002-10大红</p>
            <div class="price2" style="float: left;text-align: left; font-size: 17px;width: 99%;">
              <strong>￥{{ele.price * ele.num}}</strong>
              <article class="num">
                <input
                  style="float: left"
                  type="button"
                  value="-"
                  class="cut"
                  @click="cut(ele,a,index)"
                />
                <input style="float: left" type="text" class="nums" v-model="ele.num" />
                <input
                  style="float: left"
                  type="button"
                  value="+"
                  class="add"
                  @click="add(ele,a,index)"
                />
              </article>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like" v-show="like">
      <div class="gw_tit">
        <img class="guess" src="../img/guessyoulike.png" />
      </div>
    </div>
    <div class="likegoods" v-show="like2">
      <div class="listbott">
        <div class="listbo" v-for="item in listbo" :key="item.id">
          <div class="g-img">
            <img :src="item.img" />
          </div>
          <div class="g-title">
            <p class="g-name">{{item.title}}</p>
            <p class="g-price">
              {{item.price}}
              <i>{{item.delprice}}</i>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <van-submit-bar :price="zongjia *100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 1,
      listbo: "",
      like: true,
      // like2: true,
      cartlist: [],
      cartnum: "",
      val: this.$store.state.cart.cartlist.num
    };
  },
  methods: {
    async getlistbo() {
      //猜你喜欢
      let { data } = await this.$axios.get("http://localhost:5555/listbo/all");
      this.listbo = data;
    },
    onSubmit() {},
    add(item, a, index) {
      // console.log(this.cartlist[a].cartlist[index].num,a,index);
      // window.console.log(item);
      // window.console.log(index);
      if (item.num < item.kucun) {
        this.cartlist[a].cartlist[index].num++;
        let good = {
          gid: item.gid,
          uid: item.uid,
          num: this.cartlist[a].cartlist[index].num
        };
        this.$store.dispatch("updatedgood", good);
      } else {
        // window.console.log("达到库存量");
        alert("达到库存量");
      }
    },
    cut(item, a, index) {
      if (item.num > 1) {
        this.cartlist[a].cartlist[index].num--;
        let good = {
          gid: item.gid,
          uid: item.uid,
          num: this.cartlist[a].cartlist[index].num
        };
        this.$store.dispatch("updatedgood", good);
      } else {
        // window.console.log("最少买一份");
        alert("最少买一份");
      }
    },
    stall(a) {
      //店铺全选
      this.cartlist[a].cartlist.map(e => (e.isok2 = !this.cartlist[a].isok));
      console.log(this.cartlist[a].isok);
    },
    async car() {
      //获取购物车所有商品
      let { data } = await this.$axios.get(
        `http://localhost:5555/listbo/cartlist`
      );
      console.log(data);
      console.log("123456");
    },
    async del(gid) {
      // let { data } = await this.$axios.delete(
      //   "http://localhost:5555/listbo/cartdelall",
      //   {
      //    gid:2
      //   }
      // );
      let { data } = await this.$axios.delete(
        `http://localhost:5555/listbo/cartdelall/${gid}`
      );
      this.$router.go(0);//刷新
      
      console.log("gid");
      console.log(data);
    },
    remove() {
      //遍历数据
      // let del = 0;
      for (let i = 0; i < this.cartlist.length; i++) {
        this.cartlist[i].cartlist.map(ele => {
          if (ele.isok2) {
            console.log(ele.gid);
            this.del(ele.gid); //执行删除
            this.car(); //获取购物车所有商品
          }
        });
      }
    }
  },
  created() {
    //获取购物车数据
    // this.car(); //获取购物车所有商品
    this.$store.dispatch("getcartlsit");
    this.cartlist = this.$store.state.cart.cartlist;
    this.cartnum = this.$store.state.cart.cartlist.length;
    // console.log(this.$store.state.cart.cartlist);
    if (this.$store.state.cart.cartlist.length == 0) { //如果购物车没东西就加载猜你喜欢
      this.getlistbo(); //猜你喜欢
      this.like = true;
      this.like2 = true;

    } else {
      this.like = false;
      this.like2 = false;
    }
  },
  computed: {
    checked: {
      get() {
        return this.cartlist.every(ele => ele.isok);
      },
      set(val) {
        this.cartlist.map(ele => {
          ele.cartlist.map(ele => (ele.isok2 = val));
          ele.isok = val;
        });
      }
    },
    zongjia: {
      get() {
        let sum = 0;
        let summ = this.cartlist.map(ele => {
          let zj = 0; //总价
          ele.cartlist.map(e => {
            if (e.isok2) {
              zj += e.price * e.num * 1;
            }
          });
          return zj * 1;
        });
        for (let i = 0; i < summ.length; i++) {
          sum += summ[i];
        }
        return sum;
      }
    }
  },
  watch: {
    cartlist: {
      handler(newVal) {
        newVal.map(ele => {
          ele.isok = ele.cartlist.every(item => item.isok2);
        });
      },
      immediate: true, //最初绑定的时候 立即执行监听
      deep: true // 深度监听
    }
  }
};
</script>
<style >
.van-submit-bar {
  margin-bottom: 13%;
  z-index: 999;
}
strong {
  float: left;
  color: black;
  font-size: 16px;
}
.num {
  overflow: hidden;
  width: 2rem;
  height: 0.7rem;
  float: right;
  text-align: center;
  border: 0.5px solid rgb(202, 202, 202);
  border-radius: 5px;
  color: black;
}
.nums {
  width: 0.67rem;
  text-align: center;
  line-height: 0.75rem;
  border: 0.5px solid rgb(202, 202, 202);
}
.cut,
.add {
  width: 0.64rem;
  line-height: 0.75rem;
}
.cartlist {
  border: 1px solid rgb(243, 243, 243);
}
.gw_tit {
  text-align: center;
  margin-top: 40px;
  width: 100%;
}
.guess {
  border: medium none;
  margin: 0;
  padding: 0;
  width: 100%;
  vertical-align: top;
}
.goodsshop {
  display: flex;
  padding: 0 10px;
}
.goodsshop p {
  font-size: 14px;
}
.goodsinfo {
  /* width: 100%; */
  overflow: hidden;
  /* display: flex; */
  padding: 10px 10px;
}
.goodsinfo li {
  margin: 0.1rem;
  width: 100%;
  overflow: hidden;
}
.goodsinfo img {
  width: 25%;
  float: left;
}
.goodsinfo input {
  float: left;
}
.goodsinfo div {
  width: 70%;
  float: right;
}
.goodsinfo p {
  font-size: 14px;
}
.goodsinfo span {
  font-size: 14px;
}
.goodsinfo i {
  font-size: 14px;
}
</style>